<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>搜索结果</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>
<br/>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <h1 class="text-center">
                <a href="/index" style="text-decoration-line: none;color: black">📕亚牛逊图书</a>
            </h1>
            <ul class="nav nav-pills">
                <li><a href="/index">首页</a></li>
                <li><a href="/book/bookList/0/0">书单</a></li>
                <li><a href="/recommend/rank">排行</a></li>
                <li><a href="/recommend/hot">热门</a></li>
                <li class="dropdown pull-right">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">我的<strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        <li th:if="not ${userInfo}"><a href="/user/login" th:text="欢迎，请先登录"></a></li>
                        <li th:if="${userInfo}"><a href="#" th:text=('欢迎，'+${userInfo})></a></li>
                        <li th:if="${userInfo}" class="divider"></li>
                        <li th:if="${userInfo}"><a href="/user/profile" th:text="个人中心"></a></li>
                        <li th:if="${userInfo}"><a href="/user/collection" th:text="收藏"></a></li>
                        <li th:if="${userInfo}"><a href="/user/logoutAction" th:text="注销"></a></li>
                    </ul>
                </li>
                <li class="pull-right" th:if="not ${userInfo}"><a href="/user/register">注册</a></li>
                <li class="pull-right" th:if="not ${userInfo}"><a href="/user/login">登录</a></li>
            </ul>

            <center>
                <div class="page-header">
                    <h2>
                        找到你想要的书了吗~ <small>(●'◡'●)</small>
                    </h2>
                </div>
                <br/>
                <br/>
                <form class="form-search" action="/search/searchAction" method="get">
                    <p>
                        <input class="input-medium search-query" type="text" name="bookName"
                               value="" placeholder="搜书..."/>
                        <button class="btn" type="submit">查找</button>
                    </p>
                </form>
                <br/>
                <p th:text="'共 '+${resultCount}+' 条结果'"></p>
                <button class="btn" type="button">
                    <a href="/search/searchResult/0">首页</a>
                </button>
                <div class="btn-group">
                    <button class="btn" type="button">
                        <a th:href="${pageNum}==0?'#':'/search/searchResult/'+(${pageNum}-1)"
                           th:text="${pageNum}==0?'已是首页':'上一页'"></a>
                    </button>
                    <button th:each="i:${#numbers.sequence(pageNum-4, pageNum+4)}"
                            th:class="${i}!=${pageNum}?'btn':'btn active'"
                            type="button" th:if="(${i}>=0) and (${i}<=${maxPages})">
                        <a th:href="'/search/searchResult/'+${i}" th:text="${i}+1"></a>
                    </button>
                    <button class="btn" type="button">
                        <a th:href="${pageNum}==${maxPages}?'#':'/search/searchResult/'+(${pageNum}+1)"
                           th:text="${pageNum}==${maxPages}?'已是尾页':'下一页'"></a>
                    </button>
                </div>
                <button class="btn" type="button">
                    <a th:href="'/search/searchResult/'+${maxPages}">尾页</a>
                </button>
                <br/>
                <br/>
                <br/>
            </center>

            <table class="table table-hover">
                <thead>
                <tr>
                    <th>书名</th>
                    <th>价格</th>
<!--                    <th>评价</th>-->
                    <th>作者</th>
                </tr>
                </thead>
                <tbody th:each="book:${bookList}">
                <tr class="success">
                    <td><a th:href="'/book/detail/'+${book.bookId}" th:text="${book.bookName}"></a></td>
                    <td th:text="${book.price}"></td>
<!--                    <td th:text="${book.rating}"></td>-->
                    <td th:text="${book.author}"></td>
                </tr>
                </tbody>
            </table>
            <br/>
            <center>
                <button class="btn" type="button">
                    <a href="/search/searchResult/0">首页</a>
                </button>
                <div class="btn-group">
                    <button class="btn" type="button">
                        <a th:href="${pageNum}==0?'#':'/search/searchResult/'+(${pageNum}-1)"
                           th:text="${pageNum}==0?'已是首页':'上一页'"></a>
                    </button>
                    <button th:each="i:${#numbers.sequence(pageNum-4, pageNum+4)}"
                            th:class="${i}!=${pageNum}?'btn':'btn active'"
                            type="button" th:if="(${i}>=0) and (${i}<=${maxPages})">
                        <a th:href="'/search/searchResult/'+${i}" th:text="${i}+1"></a>
                    </button>
                    <button class="btn" type="button">
                        <a th:href="${pageNum}==${maxPages}?'#':'/search/searchResult/'+(${pageNum}+1)"
                           th:text="${pageNum}==${maxPages}?'已是尾页':'下一页'"></a>
                    </button>
                </div>
                <button class="btn" type="button">
                    <a th:href="'/search/searchResult/'+${maxPages}">尾页</a>
                </button>
                <br/>
                <br/>
                <p th:text="'当前第 '+(${pageNum}+1)+' 页'"></p>
            </center>
        </div>
    </div>
</div>
<br/>
<br/>
<br/>
<br/><br/>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

</body>
</html>